<template>
	<view class="pageItem">
		<view class="list_item">
			<block v-for="(item,index) in list" :key="'n_'+index">
				<view class="card" >
					<view class="goods" @click="to_goods_detail(item)">
						<image class="g_img" :src="realUrl(item.logo)"></image>
						<view class="g_msg">
							<view class="g_tit">{{item.title}}</view>
							<view class="g_price">
								{{item.pay_price}}<image class="img" src="/static/other/diamond_mini.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
					<view class="msg">
						<view class="status"><!-- 订单的状态 -->
							<label v-if="item.status == '2'">{{$t('diamond.order_status2')}}</label>
							<label v-else-if="item.status == '4'">{{$t('diamond.order_status3')}}</label>
							<!-- <label v-else>{{$t('diamond.order_status1')}}</label> -->
						</view>
						<view class="time">{{item.create_at}}</view>
					</view>
				</view>
			</block>
			<view class="no_msg" v-if="list.length == 0">
				<image class="img" src="/static/nodata.png" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				load_type : 'more',
				loading : 0,
				empty_show : 0, 
				page : 1,
				list:[],
			};
		},
		onReachBottom() {
			 this.loadData();
		},
		onLoad() {
		    this.loadData();
		},
		methods:{
			to_goods_detail(item){
				uni.setStorageSync('cur_goods',JSON.stringify(item));
				this.$r('/pages/diamond/exchangeGoods?id='+item.id+'&type=2');
			},
			loadData(){
				if (this.load_type === 'loading' || this.load_type === 'no_more') {
					//防止重复加载
					return;
				}
				this.load_type = 'loading';
				let url = this.site_url + 'api/auth/order/order_list?page='+this.page;
					this.areq(url).then(res=>{
						this.empty_show = 1;
						this.loading = 1;
						   if(res.code == 1){
							   this.page++;
							   this.list = [...this.list,...res.data];
							   if(res.data.length == 10)
							   {
							   	this.load_type = 'more';
							   }else{
							   	this.load_type = 'no_more';
							   }
						   }else{
							   this.load_type = 'no_more';
						   }
					})	
			},
			
			
		}
	}
</script>

<style lang="scss">
.list_item{
	width: 100%;
	padding: 4vw 3% 0;
	.card:not(:first-child){
		margin-top: 3vw;
	}
	.card{
		width: 100%;
		@include card_style();
		.goods{
			width: 100%;
			display: flex;
			.g_img{
				width: 18vw;
				height: 19vw;
				border-radius: 1vw;
			}
			.g_msg{
				flex: 1;
				padding-left: 3vw;
				.g_tit{
					font-size: 4vw;
					font-weight: bold;
					padding-top: 1vw;
					color: $main_color5;
					@include text_over_style(1);
				}
				.g_price{
					padding-top: 4vw;
					font-size: 5vw;
					color: $price_color;
					font-weight: bold;
					display: flex;
					align-items: center;
					.img{
						width: 4vw;
						margin-left: 2vw
					}
				}
			}
		}
		.msg{
			width: 100%;
			display: flex;
			align-items: center;
			padding-top: 2vw;
			margin-top: 2vw;
			border-top: 1rpx dotted #e3e3e3;
			.status{
				font-size: 3.8vw;
				font-weight: bold;
				color: $main_color_s2;
			}
			.time{
				flex: 1;
				text-align: right;
				font-size: 3.2vw;
				color: $main_color4;
			}
		}
	}
}
</style>
